import { FC, useEffect, useState } from "react";
import { observer, inject } from "mobx-react";
import { Typography, Timeline, Popover, Tabs, List } from "antd";
import { ReagentPop } from "./BottlesPlane";
import { getReactorInfoList, getUsedReagentString } from "../../utils";

import { ITStore } from "../../store";

interface TProp {
  store: ITStore;
}

const { Text, Link } = Typography;

const ReactorTimeline: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    languageStore: { lang, langCur },
    designerStore: { currentDesigner, currentReactorReagents },
    reagentStore: { getReagentInfoById, getReagentUnit },
  } = store;

  const [processList, setProcessList] = useState<string[]>([]);

  useEffect(() => {
    if (currentDesigner) {
      let tempList = getReactorInfoList({
        lang,
        langCur,
        getReagentInfoById,
        getReagentUnit,
        designer: currentDesigner,
      });
      setProcessList(tempList);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentDesigner, langCur]);

  const TabItem = () => {
    return (
      <List
        dataSource={processList}
        renderItem={(item) => (
          <List.Item>
            <Text> {item}</Text>
          </List.Item>
        )}
      />
    );
  };

  const TabTimeline = () => {
    return (
      <>
        {!!currentReactorReagents && !!currentReactorReagents.length && (
          <Timeline>
            {currentReactorReagents.map((item, index) => {
              const { reagentid, tubeName, amount, mmol, volume, weight } = item;
              console.log(item)
              const reagentInfo = getReagentInfoById(reagentid);
              const unit = getReagentUnit(reagentid, lang);
              let tempName = "";
              if (reagentInfo) {
                const { name, cnname } = reagentInfo;
                tempName = name;
                // tempStr = `${name}(${amount}${unit})`;
                if (langCur === "zhcn" && cnname) {
                  tempName = cnname;
                }
              }

              let amountList: string[] = [];
              if (mmol > 0) {
                amountList.push(`${mmol} ${lang['langmmol']}`)
              }
              if (volume > 0) {
                amountList.push(`${volume} ${lang["langmlunit"]}`)
              }
              if (weight) {
                amountList.push(`${weight} ${lang["langmg"]}`)
              }

              const usedReagentString = getUsedReagentString({ mmol, volume, weight, lang })

              return (
                <Timeline.Item key={index}>
                  <Text strong>{tubeName}</Text> {lang["langreactoradd"]}
                  <Popover content={<ReagentPop reagentInfo={reagentInfo} />}>
                    <Link> {tempName} </Link>
                  </Popover>
                  {usedReagentString.join(", ")}
                </Timeline.Item>
              );
            })}
          </Timeline>
        )}
      </>
    );
  };

  return (
    <Tabs
      defaultActiveKey="1"
      items={[
        {
          label: lang["langcomprocess"],
          key: "1",
          children: <TabItem />,
        },
        {
          label: lang["langdetailprocess"],
          key: "2",
          children: <TabTimeline />,
        },
      ]}
    ></Tabs>
  );
};
export default inject("store")(observer(ReactorTimeline));
